<template>
    <div class="select-data">
        <div class="sign-success">
            <div class="sign-success-text">您已成功报名</div>
            <div class="course-name">课程：{{currentCourse.course && currentCourse.course.name}}</div>
            <div class="course-time">开课时间：{{startDate}}</div>
        </div>
        <div class="select-panel">
            <div class="panel-head flex-row">
                <div class="panel-title">选择空余时间</div>
                <div class="read-data" @click="showCourseTime(true)">查看上课时间</div>
            </div>
            <div class="panel-data flex-row">
                <div class="panel-week" @click="minusWeek">上一周</div>
                <div class="panel-week-date flex-col">
                    <div class="week-month">{{nowWeek[0] && nowWeek[0].date || ''}} 至 {{nowWeek[0] && nowWeek[nowWeek.length-1].date  || ''}}</div>
                    <div class="week-year">{{nowWeek[0] && nowWeek[0].year  || ''}}年</div>
                    
                </div>
                <div class="panel-week" @click="addWeek">下一周</div>
            </div>
            <div class="date-content">
                <div class="week-head flex-row">
                    <div class="week-head-item flex-col" v-for="(item,key) in nowWeek" :key="'nowWeek'+key">
                        <div class="weekText">{{weekText[key]}}</div>
                        <div class="weekDay">{{item.date}}</div>
                    </div>
                </div>
                <div class="week-row flex-row">
                    <div class="week-item" :class="{'disable':item.disable,'selected':item.morning}" v-for="(item,key) in nowWeek" :key="'morning'+key"
                    @click="selectDate('morning',key,item.disable)">上午</div>
                </div>
                <div class="week-row flex-row">
                    <div class="week-item" :class="{'disable':item.disable,'selected':item.afternoon}" v-for="(item,key) in nowWeek" :key="'afternoon'+key"
                    @click="selectDate('afternoon',key,item.disable)">下午</div>
                </div>
                <div class="week-row flex-row">
                    <div class="week-item " :class="{'disable':item.disable,'selected':item.evening}" v-for="(item,key) in nowWeek" :key="'evening'+key"
                    @click="selectDate('evening',key,item.disable)">晚上</div>
                </div>
            </div>
            <div class="select-every-week">
                <div class="every-week-btn" @click="h5showSelectWeek">该课表复用到每一周</div>
            </div>
            <div class="select-speedy flex-row">
                <div class="select-shortcut" @click="hrfeFastSelect">快捷选时间</div>
                <div class="select-weekend" @click='weekEndSelect'>周末全选</div>
            </div>
        </div>
        <div class="select-remark">
            <div class="remark-title">备注</div>
            <div class="remark-content">
                <textarea placeholder='如果有什么想了解的，请在这里输入（0-200字）' maxlength=200 v-model="remark"></textarea>
            </div>
        </div>
        <div class="select-submit">
            <div class="submit-btn" :class="{'disable':!canSend}" @click='handelSubmit'>提交</div>
        </div>
        <modal v-show="courseTime">
            <div class="modal-course-time">
                <div class="course-time-hint">
                    <div>上午上课时间 09 : 30 - 12 : 00</div>
                    <div>下午上课时间 14 : 30 - 17 : 00</div>
                    <div>晚上上课时间 19 : 00 - 21 : 30</div>
                </div>
                <div class="course-time-btn"  @click="showCourseTime(false)">我知道了</div>
                <div class="course-time-icon"><img src="/static/h5img/LOGO.png" alt=""></div>
            </div>
        </modal>
        <modal v-show="selectWeekModal">
            <div class="modal-week-select">
                <div class="week-select-close" @click="closeSelectWeek"><img src="../../../static/h5img/guanbi.png" alt=""></div>
                <div class="week-select-title">
                    <div class="select-title-top">复用到每一周</div>
                    <div class="select-title-bottom">点击下面格子选择你想复用的星期</div>
                </div>
                <div class="week-select-list" ref="wrapper">
                    <div class="week-list-content flex-row">
                        <div class="week-list-item" :class="{'disable':item.disable,'selected':item.selected}" v-for="(item,key) in weekArr" :key="key+'weekArr'"
                        @click="selectWeek(item.disable,key)">{{item.week[0].date}} 至 {{item.week[item.week.length-1].date}}</div>
                    </div>
                </div>
                <div class="week-select-check">
                    <div class="week-select-btn" :class="{'week-select-btn-disable':!hasSelectWeek}" @click="checkEveryWeek">复用以上课表到所选每一周</div>
                </div> 
                
            </div>
        </modal>
    </div>
</template>

<script>
import store from '../../store/index.js'
import Bscroll from 'better-scroll'
import { Toast } from 'vant';
import {formatPackTime, formatCourseList} from 'plus/unconfirmPack'
import modal from './h5Modal'
import {classPlan, submitCalendars} from 'api/getData'
import { mapGetters } from 'vuex'
import moment from 'moment'
import h5selectDate from 'plus/mixins/selectDate';
export default {
    mixins: [h5selectDate],
    data(){
        return {
            remark:'',
            courseTime: false,
            selectWeekModal: false,
            hasSelectWeek: false,
            weekText: ['日','一','二','三','四','五','六'],
            allDay: '',
            weekArr: [],
            nowWeek: [],
            nowWeekIndex:0,
            canSend: false,
            currentCourse:[]
        }
    },
    components:{
        modal
    },
    computed: {
        ...mapGetters(['currentUser'])
    },
    beforeRouteEnter (to, from, next) {
        if(store.getters.isLogin){
            next()
        }else{
            next('H5Login')
        }
        if(to.query.id && to.query.hcId){
                next()
        }else{
                Toast.fail({
                duration: 2000, message:'无效路径'
                })
                setTimeout(()=>{
                    Toast.clear()
                    next('/classPlan/classList')
                }, 2000)
                
        }
    },
    methods:{
      h5showSelectWeek(){
            let hasSelectDate = false
            this.nowWeek.map(item=>{
                if(!hasSelectDate){
                    hasSelectDate = item.morning || item.afternoon || item.evening
                }
            })
            // if(!hasSelectDate) return false
            // else return true
            if(!hasSelectDate) {
                Toast('请先选择空闲时间')
                return
            }else{
               this.selectWeekModal = true
            }

        }
        
    }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
.select-data{
    background:rgba(247,247,247,1);
}
.sign-success{
    background:rgba(255,255,255,1);
    padding: 4rem 3rem;
    margin-bottom: 3rem;
    .sign-success-text{
        font-size:4.2rem;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(22,22,22,1);
        margin-bottom: 3rem;
    }
    .course-name,.course-time{
        font-size:3rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
        
    }
    .course-name{
        margin-bottom: 2rem;
    }
}
.select-panel{
    background:rgba(255,255,255,1);
}
.panel-head{
    padding: 4rem 3rem;
    margin-bottom: 3rem;
    justify-content: space-between;
    align-items: flex-end;
    .panel-title{
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
    }
    .read-data{
        font-size:3rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,36,13,1);
        text-decoration: underline;
    }
}
.panel-data{
    padding: 0 3rem;
    justify-content: space-between;
    margin-bottom: 5rem;
    .panel-week{
        padding: 2rem 3rem;
        background:rgba(247,247,247,1);
        border-radius:0.4rem;
        font-size:2.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
    }
}
.panel-week-date{
    justify-content: space-around;
    text-align:center;
    .week-month{
        font-size:2.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
    }
    .week-year{
        font-size:2rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
    }
}
.date-content{
    padding: 0 3rem;
    margin-bottom: 5rem;
}
.week-head{
    box-sizing:border-box;
    justify-content: space-between;
    margin-bottom: 1rem;
    .week-head-item{
        width:9rem;
        height:9rem;
        flex: 1;
        background:rgba(255,255,255,1);
        text-align: center;
        justify-content: space-around;
        .weekText{
            font-size:2.2rem;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(164,164,164,1);
        }
        .weekDay{
            font-size:2.6rem;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(22,22,22,1);
        }
    }
}
.week-row{
    box-sizing:border-box;
    justify-content: space-between;
    margin-bottom: 1rem; 
    .week-item{
        flex: 1;
        box-sizing: border-box;
        margin-left: 1rem;
        text-align: center;
        width:9rem;
        height:9rem;
        line-height:9rem;
        background:rgba(247,247,247,1);
        font-size:2.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
        border:0.2rem solid transparent;
    }
    .disable{
        color:rgba(164,164,164,1);
    }
    .selected{
        background:rgba(255,245,244,1);
        border:0.2rem solid rgba(255,36,13,1);
    }
}
.select-every-week{
    padding: 0 3rem;
    margin-bottom: 2rem;
    .every-week-btn{
        height:8.2rem;
        line-height: 8.2rem;
        border-radius:0.4rem;
        border:0.1rem solid rgba(255,36,13,1);
        font-size:3.2rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,36,13,1);
        text-align: center;
    }
}
.select-speedy{
    padding: 0 3rem;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
    justify-content: space-between;
    >div{
        flex: 1;
        height:8.2rem;
        line-height: 8.2rem;
        border-radius:0.4rem;
        border:0.1rem solid rgba(229,229,229,1);
        font-size:3.2rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
        text-align: center;
    }
    .select-shortcut{
        margin-right: 2rem;
    }
}
.select-remark{
    padding: 0 3rem;
     margin-bottom: 9rem;
    background:rgba(255,255,255,1);
    .remark-title{
        height:11.6rem;
        line-height: 11.6rem;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
    }
    .remark-content{
        padding: 4rem 0;
    }
    textarea{
        box-sizing: border-box;
        padding: 3rem 2rem;
        width: 100%;
        height:19rem;
        background:rgba(247,247,247,1);
        border: 0;
        border-radius:0.4rem;
        overflow:auto;
        word-break:break-all;
        font-size:3rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(164,164,164,1);
        line-height:4.5rem;
    }
}
.select-submit{
    padding: 3rem;
    background:rgba(255,255,255,1);
    .submit-btn{
        height:9.8rem;
        line-height: 9.8rem;
        text-align: center;
        background:rgba(255,36,13,1);
        border-radius:0.4rem;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
    .disable{
        opacity:0.5;
    }
}
.modal-course-time{
    position: absolute;
    width:61rem;
    height:52.4rem;
    background:rgba(255,255,255,1);
    border-radius:2.6rem;
    top:50%;
    left 50%;
    margin-top: -26.2rem;
    margin-left: -30.5rem;
    padding: 0 5rem;
    box-sizing: border-box;
}
.course-time-icon{
    position: absolute;
    box-sizing: border-box;
    width:13rem;
    height:13rem;
    top: -3rem;
    left: 50%;
    margin-left: -6.5rem;
    // border: 1rem solid rgba(255,255,255,1);
    border-radius: 50%;
    background:rgba(255,255,255,1);
    img{
        width: 100%;
        height: 100%;
    }

}
.course-time-hint{
    margin-top: 15rem;
    line-height:5.4rem;
    text-align: center;
    >div{
        font-size:3.4rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
    }
}
.course-time-btn{
    text-align: center;
    margin-top: 7rem;
    height:8.2rem;
    line-height: 8.2rem;
    background:rgba(255,36,13,1);
    border-radius:4.1rem;
    font-size:3.2rem;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(255,255,255,1);
}
.modal-week-select{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    max-height:91.8rem;
    background:rgba(255,255,255,1); 
    .week-select-title{
        padding: 4rem 3rem;
        .select-title-top{
            font-size:3.4rem;
            line-height:3.4rem;
            font-family:SourceHanSansCN-Bold;
            font-weight:bold;
            color:rgba(30,30,30,1);
            margin-bottom:2rem;
        }
        .select-title-bottom{
            font-size:2.6rem;
            line-height:2.6rem;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(30,30,30,1);
        }
    }
}
.week-select-list{
    max-height:60rem;
    overflow: hidden;
    width:100%;
    padding:0 3rem;
    box-sizing:border-box;
    .week-list-content{
        box-sizing:border-box;
        flex-wrap:wrap;
        
        .week-list-item{
            box-sizing:border-box;
            display: flex;
            align-items:center;
            justify-content:center;
            text-align:center;
            margin-top:1rem;
            height:8.2rem;
            width:49%;
            background:rgba(247,247,247,1);
            font-size:3rem;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(30,30,30,1);
            border:0.1rem solid transparent;
        }
        .disable{
            background:rgba(247,247,247,1);
            color:rgba(164,164,164,1);
        }
        .selected{
            color:rgba(255,36,13,1);
            background:rgba(255,245,244,1);
            border:0.1rem solid rgba(255,36,13,1);
        }
        .week-list-item:nth-child(2n-1){
            margin-right:2%;
        }
    }
}
.week-select-check{
    box-sizing:border-box;
    padding:3rem;
    width:100%;
    height:15.8rem;
    background:rgba(255,255,255,1);
    .week-select-btn{
        height:9.8rem;
        line-height:9.8rem;
        text-align:center;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        background:rgba(255,36,13,1);
        border-radius:0.4rem;
    }
    .week-select-btn-disable{
        opacity:0.5;
    }
}

.week-select-close{
    position:absolute;
    z-index:1001;
    top:3rem;
    right:3rem;
    font-size:2.6rem;
    color:rgba(0, 0, 0, 1);
    img{
        width:2.6rem;
        height:2.6rem;
    }
}
</style>